<template>
  <div class="deviceReceiveList pd-20">
    <el-input v-model="orderNumber"
              placeholder="请输入订单号"
              class="w-200"
              clearable
              @clear="handleQuery" />
    <el-input v-model="nickName"
              placeholder="请输入用户昵称"
              class="w-200"
              clearable
              @clear="handleQuery" />
    <el-select v-model="serviceType"
               clearable
               class="w-200"
               @clear="handleQuery">
      <el-option label="体检订单"
                 value="16"></el-option>
      <el-option label="居家监测"
                 value="21"></el-option>
      <el-option label="买服务赠送"
                 value="13"></el-option>

    </el-select>
    <el-button type="primary"
               @click="handleQuery">查 询</el-button>
    <element-table class="mt-20"
                   v-loading="loading"
                   :columns="columns"
                   :data="tableData"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:option="{row}">
        <el-tag type="danger"
                v-if="row.status === -1">已驳回</el-tag>
        <el-tag type="warning"
                v-if="row.status === 0">未付款</el-tag>
        <el-tag type="warning"
                v-if="row.status === 1">未申请</el-tag>
        <el-button type="success"
                   size="mini"
                   v-if="row.status === 2"
                   @click="handleRow(row, 'delivery')">发 货</el-button>
        <el-tag type="info"
                v-if="row.status === 3">已发货</el-tag>
        <!-- <el-button type="info"
                   v-if="row.status === 4"
                   @click="handleRow(row, 'dismissed')">驳 回</el-button> -->
      </template>
    </element-table>

    <el-dialog title="发货"
               width="30%"
               :visible.sync="dialogDeliveryVisible">
      <el-form :model="form"
               :rules="formRules"
               ref="formRefs">
        <el-form-item label="快递公司"
                      :label-width="formLabelWidth"
                      prop="logisticsId">
          <el-select v-model="form.logisticsId"
                     class="w-200"
                     placeholder="请选择快递公司"
                     clearable>
            <el-option v-for="item in logisticsList"
                       :value="item.id"
                       :label=" item.name"
                       :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="快递单号"
                      :label-width="formLabelWidth"
                      prop="logisticsNumber">
          <el-input v-model="form.logisticsNumber"
                    autocomplete="off"
                    placeholder="请输入快递单号"
                    class="w-200"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogDeliveryVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitForm('delivery')">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="驳回"
               :visible.sync="dialogDismissedVisible">
      <el-form :model="form"
               :rules="formModelRules"
               ref="formModelRefs">
        <el-form-item label="驳回原因"
                      :label-width="formLabelWidth"
                      prop="result">
          <el-input type="textarea"
                    v-model="form.result"
                    autocomplete="off"
                    placeholder="请输入驳回原因"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogDismissedVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitForm('dismissed')">驳 回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import elementTable from '@/base/ElementTable'
  export default {
    name: "deviceReceiveList",
    data () {
      return {
        columns: [
          {
            label: '订单号',
            prop: 'orderNumber',
            width: 200,
            align: 'center',
            showToolTip: true,
            formatter: (row, cellValue) => {
              if (row.orderInfoDto.length != 0) {
                return row.orderInfoDto.orderNumber;
              } else {
                return '';
              }
            },
          },
          {
            label: '订单来源',
            prop: 'channelName',
            align: 'center',
            width: 100,
            formatter: (row, cellValue) => {
              if (row.orderInfoDto.length !== 0) {
                return row.orderInfoDto.channelName;
              } else {
                return '';
              }
            }
          },
          {
            label: '内容',
            prop: 'content',
            align: 'center'
          },
          {
            label: '推销账号',
            prop: 'salesForce',
            align: 'center',
            formatter: (row, cellValue) => {
              if (row.orderInfoDto.length != 0) {
                return row.orderInfoDto.salesForce;
              } else {
                return '';
              }
            }
          },
          {
            label: '状态',
            prop: 'status',
            formatter: (row, cellValue) => {
              if (row.status === 0) return '未付款'
              if (row.status === 1) return '已付款'
              if (row.status === 2) return '已申请'
              if (row.status === 3) return '已发货'
              if (row.status === 4) return '已失效'
              if (row.status === -1) return '已驳回'
            },
            align: 'center'
          },
          {
            label: '有效时间',
            prop: 'effectiveDays',
            align: 'center',
            width: 100,
          },
          {
            label: '电话',
            prop: 'phone',
            align: 'center'
          },
          {
            label: '收货地址',
            prop: 'address',
            align: 'center'
          },
          {
            label: '物流编号',
            prop: 'logisticsNumber',
            align: 'center'
          },
          {
            label: '业务来源',
            prop: 'businessName',
            align: 'center',
            formatter: (row, cellValue) => {
              if (row.orderInfoDto.length !== 0) {
                return row.orderInfoDto.businessName;
              } else {
                return '';
              }
            }
          },
          {
            label: '备注',
            prop: 'remark',
            align: 'center'
          },
          {
            label: '驳回原因',
            prop: 'result',
            align: 'center'
          },
          {
            label: '操作',
            prop: 'option',
            align: 'center',
            isSlot: true
          }
        ],
        serviceType: '',
        tableData: [],
        pageTotal: 0,       //总条数
        loading: false,
        orderNumber: '',
        nickName: '',
        pageIndex: 1,
        pageSize: 20,
        dialogDeliveryVisible: false,
        dialogDismissedVisible: false,
        form: {
          logisticsNumber: '',
          id: '',
          status: '',
          result: ''
        },
        formLabelWidth: '120px',
        logisticsList: [],
        formRules: {
          logisticsId: [{ required: true, message: '请选择快递公司', trigger: 'chagne' }],
          logisticsNumber: [{ required: true, message: '请输入快递单号', trigger: 'blur' }],
        },
        formModelRules: {
          result: [{ required: true, message: '请输入驳回原因', trigger: 'blur' }],
        }
      }
    },
    created () {
      this._getList();
      this.initLogisticsList();
    },
    methods: {
      handleQuery () {
        this.pageIndex = 1;
        this._getList();
      },
      // 物流列表
      initLogisticsList () {
        this.post(this.api.logistics.getAllLogistics).then((res) => {
          if (res.data.code === '200') {
            this.logisticsList = res.data.object;
          }
        });
      },
      _getList () {
        this.loading = true;
        let param = {
          orderNumber: this.orderNumber,
          nickName: this.nickName,
          serviceType: this.serviceType,
          pageSize: this.pageSize,
          pageIndex: this.pageIndex - 1
        };
        this.post(this.api.deviceReceiveList.url, param).then((res) => {
          if (res.data.code === '200') {
            this.loading = false;
            this.tableData = res.data.object;
            this.pageTotal = res.data.totalNum;
          }
        })

      },

      handleChangePage (val) {
        this.pageIndex = val;
        this._getList();
      },
      handleRow (row, option) {
        this.form.id = row.id;
        switch (option) {
          case 'delivery':
            this.dialogDeliveryVisible = true;
            this.form.status = 3;
            break;
          case 'dismissed':
            this.dialogDismissedVisible = true;
            this.form.status = -1;
            break;
        }
      },
      submitForm (op) {
        if (op === 'delivery') {
          this.$refs['formRefs'].validate((valid) => {
            if (valid) {
              this.post(this.api.deviceReceiveChange.url, this.form).then(res => {
                if (res.data.code === '200') {
                  this.$message.success('发货成功!');
                  this.dialogDeliveryVisible = false;
                  this._getList();
                }
              })
            }
          })
        }
        if (op === 'dismissed') {
          this.$refs['formModelRefs'].validate((valid) => {
            if (valid) {
              this.post(this.api.deviceReceiveChange.url, this.form).then(res => {
                if (res.data.code === '200') {
                  this.$message.success('驳回成功!');
                  this.dialogDismissedVisible = false;
                  this._getList();
                }
              })
            }
          })
        }
      },
    },
    components: {
      'element-table': elementTable
    }
  }
</script>
<style scoped>
</style>


